<template>
  <div class="category">
    <ReturnBack></ReturnBack>
    <van-tabs v-model="activeName" swipeable @click="onClick">
      <van-tab v-for="item in currentSubCategory" :title="item.name" :key="item.id" :name="item.id">
        <van-grid :border="false" :column-num="1" class="first">
          <div class="up">{{item.name}}</div>
          <div class="down">{{item.desc}}</div>
        </van-grid>
      </van-tab>
    </van-tabs>
    <van-list @load="onLoad">
      <van-card
        :price="item.counterPrice"
        :desc="item.brief"
        :title="item.name"
        :thumb="item.picUrl"
        v-for="item in list" :key="item.id"
      />
    </van-list>
  </div>
</template>

<script>
import { getItemslist, getdataList } from '@/api/handpick'
import ReturnBack from '@/components/return.vue'
// import axios from 'axios'
// import beas from '@/views/Address-the-set/url.js'
export default {
  name: 'Cate-gory',
  data () {
    return {
      itemClass: '',
      activeName: null,
      dataList: {
        filterCategoryList: [],
        list: []
      },
      currentSubCategory: [],
      page: 1,
      limit: 10,
      id: '',
      list: []
    }
  },
  mounted () {
    this.itemClass = this.$route.query.itemClass
    console.log(this.itemClass)
    getdataList(this.page, this.limit, this.itemClass).then(res => {
      console.log(res.data.list)
      this.list = res.data.list
    })
    this.changeUrl()
    this.currentSubCategory = this.$store.state.currentSubCategory
    this.activeName = this.$store.state.id
    // console.log(this.currentSubCategory)
    // for (const key in this.currentSubCategory) {
    //   this.id = this.currentSubCategory[key].id
    // }
    // console.log(this.id)
  },
  methods: {
    changeUrl () {
      // console.log(this.itemClass)
      getItemslist(this.itemClass).then((res) => {
        // console.log(res.data)
        const data = res.data
        for (const key in data) {
          this.dataList[key] = data[key]
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    onClick (name) {
      console.log(name)
      getdataList(this.page, this.limit, name).then(res => {
        console.log(res.data.list)
        this.list = res.data.list
      })
    },
    onLoad () {}
  },
  components: {
    ReturnBack
  }
}
</script>

<style lang="scss" scope>
.first {
  display: flex;
  height: 100px;
  width: 100%;
  margin-top: 10px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-align: center;
  align-items: center;
}
.up{
  font-size: .55rem;
  margin-bottom: .5rem;
}
.down{
  font-size: .43rem;
  color: #ccc;
}
</style>
